<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商城 - 十年全勤健身房</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/mobile-nav.css">
    <link rel="stylesheet" href="css/quick-nav.css">
    <style>
        .shop-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/imgs/shop-bg.jpg') no-repeat center center;
            background-size: cover;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            margin-top: 80px;
        }

        .shop-hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .shop-content {
            padding: 4rem 5%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

        .product-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-info h3 {
            margin: 0 0 1rem;
            font-size: 1.2rem;
        }

        .product-price {
            color: #2ecc71;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .add-to-cart {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        .add-to-cart:hover {
            background: #27ae60;
        }

        /* 购物车图标样式 */
        .cart-icon {
            position: fixed;
            right: 20px;
            top: 100px;
            background: #2ecc71;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        .cart-icon .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        /* 购物车抽屉样式 */
        .cart-drawer {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: #fff;
            border-radius: 10px 0 0 10px;
            box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
            transition: right 0.3s ease;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }

        .cart-drawer.open {
            right: 0;
        }

        .cart-drawer h2 {
            margin: 0;
            padding: 1.5rem;
            border-bottom: 2px solid #2ecc71;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            border-radius: 10px 0 0 0;
            font-size: 1.5rem;
            color: #333;
        }

        .cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .cart-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid #eee;
            gap: 1rem;
        }

        .cart-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-title {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .cart-item-price {
            color: #2ecc71;
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .quantity-btn {
            background: #f8f9fa;
            border: 1px solid #ddd;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quantity-btn:hover {
            background: #2ecc71;
            color: white;
            border-color: #2ecc71;
        }

        .quantity-input {
            width: 40px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0.25rem;
        }

        .cart-total {
            padding: 1.5rem;
            border-top: 1px solid #eee;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-total-price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2ecc71;
        }

        .checkout-button {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s ease;
        }

        .checkout-button:hover {
            background: #27ae60;
        }

        .cart-drawer h2 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #2ecc71;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-drawer .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .cart-drawer .close-btn:hover {
            color: #e74c3c;
            background: rgba(231, 76, 60, 0.1);
        }

        .cart-drawer-header {
            padding: 1.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
        }

        .cart-drawer-footer {
            padding: 1.5rem;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
        }

        .cart-total {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .checkout-btn {
            background: #2ecc71;
            color: #fff;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .checkout-btn:hover {
            background: #27ae60;
        }

        .cart-drawer h2 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #2ecc71;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-drawer .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            transition: color 0.3s;
        }

        .cart-drawer .close-btn:hover {
            color: #333;
        }

        .contact-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
        }

        .contact-modal.show {
            display: block;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 2rem;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .qr-code {
            display: none;
            text-align: center;
        }

        .qr-code img {
            max-width: 200px;
            margin: 1rem 0;
        }
    </style>
</head>

<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <a href="index.html">十年全勤健身</a>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="courses.html">课程介绍</a></li>
                <li><a href="trainers.html">教练团队</a></li>
                <li><a href="facilities.html">器材设施</a></li>
                <li><a href="news.html">健身资讯</a></li>
                <li><a href="shop.html">在线商城</a></li>
                <li><a href="member.html">会员中心</a></li>
                <li><a href="events.html">活动专区</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="shop-hero">
            <h1>健身装备商城</h1>
        </section>

        <section class="shop-content">
            <div class="products-grid">
                <!-- 示例商品 -->
                <div class="product-card">
                    <img src="assets/imgs/yjd.png" alt="瑜伽垫" class="product-image">
                    <div class="product-info">
                        <h3>专业瑜伽垫</h3>
                        <div class="product-price">¥199</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
                <div class="product-card">
                    <img src="assets/imgs/yl.png" alt="哑铃" class="product-image">
                    <div class="product-info">
                        <h3>可调节哑铃</h3>
                        <div class="product-price">¥299</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
                <div class="product-card">
                    <img src="assets/imgs/dbf.png" alt="蛋白粉" class="product-image">
                    <div class="product-info">
                        <h3>乳清蛋白粉</h3>
                        <div class="product-price">¥399</div>
                        <button class="add-to-cart">加入购物车</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div class="cart-icon">
        <i class="fas fa-shopping-cart"></i>
        <span class="badge">0</span>
    </div>

    <div class="cart-drawer">
        <h2>购物车 <button class="close-btn">&times;</button></h2>
        <div class="cart-items">
            <!-- 购物车商品将通过 JavaScript 动态添加 -->
        </div>
        <div class="cart-total">
            <div class="cart-total-price">总计：¥0</div>
            <button class="checkout-button">结算</button>
        </div>
    </div>

    <!-- 联系方式表单弹窗 -->
    <div class="contact-modal" id="contactModal">
        <div class="modal-content">
            <button class="close-modal">&times;</button>
            <div class="contact-form">
                <h3>填写联系方式和收货地址</h3>
                <form id="checkoutForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="tel" id="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="address">收货地址</label>
                        <textarea id="address" required></textarea>
                    </div>
                    <button type="submit" class="checkout-button">确认提交</button>
                </form>
            </div>
            <div class="qr-code">
                <h3>请扫码支付</h3>
                <img src="assets/imgs/ewm.png" alt="支付二维码">
                <p>支付完成后，我们会尽快为您发货</p>
            </div>
        </div>
    </div>

    <nav class="quick-nav">
        <ul class="quick-nav-links">
            <li><a href="index.html">首页</a></li>
            <li><a href="courses.html">课程介绍</a></li>
            <li><a href="trainers.html">教练团队</a></li>
            <li><a href="facilities.html">器材设施</a></li>
            <li><a href="news.html">健身资讯</a></li>
            <li><a href="shop.html">在线商城</a></li>
            <li><a href="member.html">会员中心</a></li>
            <li><a href="events.html">活动专区</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
    </nav>

    <script>
        // 购物车功能实现
        const cartIcon = document.querySelector('.cart-icon');
        const cartDrawer = document.querySelector('.cart-drawer');
        const closeBtn = document.querySelector('.close-btn');
        const cartBadge = document.querySelector('.badge');
        const cartItems = document.querySelector('.cart-items');
        const cartTotalPrice = document.querySelector('.cart-total-price');
        const checkoutButton = document.querySelector('.checkout-button');
        const contactModal = document.getElementById('contactModal');
        const contactForm = document.querySelector('.contact-form');
        const qrCode = document.querySelector('.qr-code');
        const closeModal = document.querySelector('.close-modal');

        let cart = [];

        // 打开/关闭购物车抽屉
        cartIcon.addEventListener('click', () => {
            cartDrawer.classList.toggle('open');
        });

        // 关闭购物车抽屉
        closeBtn.addEventListener('click', () => {
            cartDrawer.classList.remove('open');
        });

        // 添加商品到购物车
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();
                const card = button.closest('.product-card');
                const product = {
                    id: Date.now(),
                    image: card.querySelector('img').src,
                    name: card.querySelector('h3').textContent,
                    price: parseFloat(card.querySelector('.product-price').textContent.replace('¥', '')),
                    quantity: 1
                };

                addToCart(product);
                updateCartUI();
                cartDrawer.classList.add('open');
            });
        });

        // 添加商品到购物车
        function addToCart(product) {
            const existingItem = cart.find(item => item.name === product.name);
            if (existingItem) {
                existingItem.quantity++;
            } else {
                cart.push(product);
            }
            updateCartBadge();
        }

        // 更新购物车界面
        function updateCartUI() {
            cartItems.innerHTML = cart.map(item => `
                <div class="cart-item" data-id="${item.id}">
                    <img src="${item.image}" alt="${item.name}">
                    <div class="cart-item-info">
                        <div class="cart-item-title">${item.name}</div>
                        <div class="cart-item-price">¥${item.price}</div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn minus">-</button>
                            <input type="number" class="quantity-input" value="${item.quantity}" min="1">
                            <button class="quantity-btn plus">+</button>
                        </div>
                    </div>
                </div>
            `).join('');

            updateCartTotal();

            // 添加数量增减事件监听
            document.querySelectorAll('.quantity-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const cartItem = e.target.closest('.cart-item');
                    const itemId = parseInt(cartItem.dataset.id);
                    const item = cart.find(item => item.id === itemId);

                    if (e.target.classList.contains('plus')) {
                        item.quantity++;
                    } else if (e.target.classList.contains('minus') && item.quantity > 1) {
                        item.quantity--;
                    }

                    updateCartUI();
                    updateCartBadge();
                });
            });

            // 添加输入框事件监听
            document.querySelectorAll('.quantity-input').forEach(input => {
                input.addEventListener('change', (e) => {
                    const cartItem = e.target.closest('.cart-item');
                    const itemId = parseInt(cartItem.dataset.id);
                    const item = cart.find(item => item.id === itemId);
                    const newQuantity = parseInt(e.target.value);

                    if (newQuantity >= 1) {
                        item.quantity = newQuantity;
                    } else {
                        e.target.value = item.quantity;
                    }

                    updateCartUI();
                    updateCartBadge();
                });
            });
        }

        // 结算按钮点击事件
        checkoutButton.addEventListener('click', () => {
            if (cart.length === 0) {
                alert('购物车是空的，请先添加商品');
                return;
            }
            contactModal.classList.add('show');
            qrCode.style.display = 'none';
            contactForm.style.display = 'block';
        });

        // 关闭弹窗按钮
        closeModal.addEventListener('click', () => {
            contactModal.classList.remove('show');
        });

        // 提交表单事件
        document.getElementById('checkoutForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            contactForm.style.display = 'none';
            qrCode.style.display = 'block';
            qrCode.innerHTML = `
                <h3>请扫码支付</h3>
                <img src="assets/imgs/ewm.png" alt="支付二维码">
                <p>订单总金额：¥${total.toFixed(2)}</p>
                <p>支付完成后，我们会尽快为您发货</p>
            `;
        });

        // 更新购物车总价
        function updateCartTotal() {
            const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            cartTotalPrice.textContent = `总计：¥${total.toFixed(2)}`;
        }

        // 更新购物车图标数字
        function updateCartBadge() {
            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
            cartBadge.textContent = totalItems;
        }
    </script>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>联系我们</h4>
                <ul>
                    <li><i class="icon-location"></i> 济南市章丘区健身大街88号</li>
                    <li><i class="icon-phone"></i> 400-123-4567</li>
                    <li><i class="icon-mail"></i> info@fitness.com</li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="#" class="social-link">微信</a>
                    <a href="#" class="social-link">微博</a>
                    <a href="#" class="social-link">抖音</a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 十年全勤健身. All rights reserved.</p>
        </div>
    </footer>

    <script src="js/mobile-nav.js"></script>
    <script src="js/nav-highlight.js"></script>
</body>

</html>